/*
 * @Author: 韩富贵 hanxzi@163.com
 * @Date: 2022-08-17 19:09:12
 * @LastEditors: 韩富贵 hanxzi@163.com
 * @LastEditTime: 2022-09-21 19:09:36
 */
import React, { useState, useEffect } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep';
import merge from 'lodash/merge';

const defaultOption = {
  color: ['#21FFCB'],
  title: {
    textStyle: {
      fontSize: 14,
      color: '#FFFFFF',
    },
  },
  tooltip: {
    show: true,
    trigger: 'axis',
  },
  textStyle: {
    fontFamily: '微软雅黑',
    fontSize: 14,
    fontWeight: 400,
  },
  grid: {
    left: 0,
    bottom: 10,
    right: 0,
    containLabel: true,
  },
  legend: {
    left: 'right',
    itemHeight: 3,
    lineStyle: {
      width: 6,
    },
    textStyle: {
      color: '#FFFFFF',
    },
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(191, 191, 191, .5)',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      fontSize: 12,
      color: 'rgba(255, 255, 255, 1)',
    },
    nameTextStyle: {
      fontFamily: '微软雅黑',
      color: '#fff',
      fontSize: 14,
      padding: [0, 0, 10, 0],
    },
  },
  yAxis: {
    type: 'value',
    splitNumber:3,
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(191, 191, 191, .5)',
      },
    },

    splitLine: {
      show: true,
      lineStyle: {
        width: 2,
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
    axisLabel: {
      fontSize: 12,
      color: 'rgba(255, 255, 255, 1)',
    },
    nameTextStyle: {
      fontFamily: '微软雅黑',
      color: '#fff',
      fontSize: 14,
      padding: [0, 0, 10, 0],
    },
  },
};
const defaultSeries = {
  showSymbol: false,
  smooth: true,
  label: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 1)',
  },
  areaStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: 'rgba(33, 255, 203,0.6)',
      },
      {
        offset: 1,
        color: 'rgba(33, 255, 203,0.1)',
      },
    ]),
  },
};
const Line: React.FC<any> = (props) => {
  const [chartOption, setChartOption] = useState({});

  const resolveData = () => {
    let series = [];
    let option: any = {};
    const defaultOptionCopy = cloneDeep(defaultOption);
    if (props.series && props.series instanceof Array) {
      series = props.series.map((item: any) => merge({}, defaultSeries, item));
      option = merge({}, defaultOptionCopy, props.option || {});
    }
    option.series = series;
    setChartOption(option);
  };

  const getOption = () => {
    return cloneDeep(chartOption);
  };

  useEffect(() => {
    resolveData();
  }, [props.refreshLoading]);
  return (
    <ReactECharts
      echarts={echarts}
      option={getOption()}
      notMerge={true}
      style={{ height: '100%', width: '100%' }}
    />
  );
};

export default Line;
